<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="index.css">
  <script defer src="index.js"></script>
</head>
<body>
  <section>
    <h2>Create Alarm</h2>
    <form class="create-alarm">
      <div class="create-alarm__label">Name</div>
      <div class="create-alarm__value">
        <input type="text" name="alarm-name" value="my-alarm">
      </div>

      <div class="create-alarm__label">Initial delay *</div>
      <div class="create-alarm__value">
        <input type="number" step="0.1" name="time-value" min="0" value=1>

        <select name="time-format">
          <option id="format-minutes" value="min" selected>minutes</option>
          <option id="format-ms" value="ms">milliseconds</option>
        </select>
      </div>

      <div class="create-alarm__label">Repetition period *</div>
      <div class="create-alarm__value">
        <input type="number" step="0.1" min="0" name="period" value="0"> minutes
        <br><i>Non-zero values create a repeating alarm that repeats every period.</i>
      </div>

      <div class="create-alarm__label">
        *
      </div>
      <div class="create-alarm__value">
        <i>Can be set to &lt; 1 min in an unpacked extension, but not in a distributed CRX file.</i>
      </div>

      <button type="submit" class="create-alarm__submit">Submit</button>
    </form>
  </section>


  <section class="col-2">
    <section class="">
      <h2>Current Alarms
        <div class="display-buttons">
          <button id="clear-display">Cancel all alarms</button>
          <button id="refresh-display" title="Clear display and re-recreate alarm UI">Refresh</button>
        </div>
      </h2>

      <pre class="alarm-display"></pre>
    </section>

    <section>
      <h2>Alarm log</h2>
      <pre class="alarm-log"></pre>
    </section>
  </section>
</body>
</html>
